<html>
<head>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link href="${ctx}/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="${ctx}/font-awesome/3.0.0/css/font-awesome.min.css" rel="stylesheet">
    <link href="${ctx}/css/index.css" rel="stylesheet">
    <link href="${ctx}/bootstrap-table/1.12.0/bootstrap-table.min.css" rel="stylesheet">
    <script src="${ctx}/jquery/2.1.4/jquery.min.js"></script>
    <script src="${ctx}/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="${ctx}/bootstrap-table/1.12.0/bootstrap-table.min.js"></script>
</head>
<body>
<div class="container-fluid">
    <div id="toolbar">
        <div class="input-group" style="float: left; width: 300px; margin-right:20px;">
            <span class="input-group-addon">名称</span>
            <input type="text" class="form-control" id="search">
        </div>

        <div class="btn-group">
            <button id="search_btn" class="btn btn-info">查询</button>
        </div>
        <div class="btn-group">
            <button id="insert_btn" class="btn btn-success">发布</button>
        </div>
        <div class="btn-group">
            <button id="delete_btn" class="btn btn-danger">删除</button>
        </div>
    </div>
    <table id="table"></table>

    <script src="${ctx}/bootstrap-table/1.12.0/locale/bootstrap-table-zh-CN.min.js"></script>
    <script src="${ctx}/bootstrap-table/1.12.0/extensions/export/bootstrap-table-export.min.js"></script>
    <script src="${ctx}/js/extends.js"></script>

    <script>
        function queryParams(opt) {
            opt.search = $("#search").val();
            return opt;
        };

        var table = null;

        $(function () {
            table = $('#table')
            //加载表格
            table.bootstrapTable({
                url: '/app/getList', //请求后台的URL（*）
                method: 'post', //请求方式（*）
                toolbar: '#toolbar', //工具按钮用哪个容器
                striped: true,
                dataType: "json",
                pagination: true,
                // "queryParamsType": "limit",
                singleSelect: false,
                contentType: "application/x-www-form-urlencoded",
                pageSize: 50,
                pageNumber: 1,
                search: false, //不显示 搜索框
                showColumns: false, //不显示下拉框（选择显示的列）
                sidePagination: "server", //服务端请求
                queryParams: queryParams,
                //minimunCountColumns: 2,
                pageList: [50, 100, 200, 500], //可供选择的每页的行数（*）
                //queryParams : oTableInit.queryParams,//传递参数（*）
                searchOnEnterKey: true,
                // search: true, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
                strictSearch: true,
                //showColumns: true, //是否显示所有的列
                showRefresh: false, //是否显示刷新按钮
                minimumCountColumns: 2, //最少允许的列数
                clickToSelect: false, //是否启用点击选中行
                height: (document.body.clientHeight), //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
                uniqueId: "appId", //每一行的唯一标识，一般为主键列
                // showToggle: true, //是否显示详细视图和列表视图的切换按钮
                // cardView: false, //是否显示详细视图
                // detailView: false, //是否显示父子表
                // showExport: true, //是否显示导出
                exportDataType: "selected", //basic', 'all', 'selected'
                columns: [{
                    title: 'ID',
                    width: '60px',
                    formatter: function (value, row, index) {
                        return index + 1;
                    }
                }, {
                    field: 'appId',
                    title: '应用Id',
                    width: '120px'
                }, {
                    field: 'title',
                    title: '应用名称',
                    width: '120px'
                }, {
                    field: 'icon',
                    title: '应用图标',
                    width: '120px',
                    formatter: function (value, row, index) {
                        var btns = '<img src="' + row.icon + '" height="30px" width="30px"/>';
                        return btns;
                    }
                }, {
                    field: 'createTime',
                    title: '创建时间',
                    width: '140px',
                    formatter: function (value, row, index) {
                        return new Date(value).format("yyyy-MM-dd HH:mm:ss");
                    }
                }, {
                    field: 'packageName',
                    title: '应用包名',
                    width: '120px'
                }, {
                    field: 'uuid',
                    title: '操作',
                    width: '100px',
                    formatter: function (value, row, index) {
                        var btns = '';
                        return btns;
                    }
                }],
                responseHandler: function (res) {
                    return {
                        "total": res.total, //总页数
                        "rows": res.rows //数据
                    };
                }
            });

            // 查询
            $("#search_btn").click(function () {
                table.bootstrapTable('refresh');
            });
        });
    </script>
</div>
</body>
</html>